<template>
    <!-- 日历 -->
    <div class="kl-calendar">
        <div
            v-if="!isCalendar"
            :class="[
                'p-f kl-calendar-no-show cu',
                IS_PC ? '' : 'f-14 flex-center c-fff mobile-kl-calendar-dor',
            ]"
            @click.stop="openCalendar"
        >
            <template v-if="IS_PC">
                <p class="f-14 m-b-5">{{ showTime[3] }}:{{ showTime[4] }}</p>
                <p>{{ showTime[0] }}/{{ showTime[1] }}/{{ showTime[2] }}</p>
            </template>
            <template v-else> 日历 </template>
        </div>

        <!-- 日历 -->
        <transition name="com-pre-an" mode="out-in">
            <calendarPage v-if="isCalendar" @openCalendar="openCalendar" @closeCandar="closeCandar"></calendarPage>
        </transition>
    </div>
</template>

<script>
export default {
    components: {
        calendarPage: () => import('@/components/kl-calendar/components/calendarPage.vue'),
    },
    data() {
        return {
            isCalendar: false,
            showTime: [], // 时钟
        }
    },

    computed: {
        IS_PC() {
            return this.isPc()
        },
    },
    created() {
        // 获取当前时间 开启时钟
        this.setShowTime()
    },
    beforeDestroy() {
        clearInterval(this.timer0)
        this.timer0 = null
    },
    methods: {
        closeCandar(){
            this.isCalendar = false
        },
        // 打开日历
        openCalendar() {
            this.isCalendar = true
        },
        // 设置时钟
        setShowTime() {
            this.showTime = this.moment(-1, 'array')
            this.timer0 = setInterval(() => {
                this.showTime = this.moment(-1, 'array')
            }, 1000)
        },
    },
}
</script>

<style lang="scss" scoped>
.kl-calendar {
    color: #555;
    .kl-calendar-bg-mask {
        position: fixed;
        right: 0;
        bottom: 0;
        width: 100vw;
        height: 100vh;
        padding: 20px;
        z-index: 980;
    }
}
.kl-calendar-no-show {
    right: 10px;
    bottom: 10px;
    padding: 6px;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    z-index: 990;
    p {
        text-align: center;
    }
}
.mobile-kl-calendar-dor {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    bottom: 180px;
    background-color: rgba(0, 0, 0, 0.4);
}
</style>
